<template>
  <div class="Login">
    <v-app-bar color="deep-purple accent-4" dense dark>
      <v-btn icon @click="$router.push('/')">
        <v-icon>mdi-chevron-left</v-icon>
      </v-btn>
      <v-toolbar-title>登录</v-toolbar-title>
    </v-app-bar>
    <div>
      <v-img
        class="mx-auto mt-4"
        width="100px"
        src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
        contain
      ></v-img>
      <v-form ref="form" v-model="valid" lazy-validation class="px-3">
        <v-text-field v-model="username" :rules="nameRules" label="手机号码" required></v-text-field>
        <v-text-field v-model="password" :rules="pwdRules" label="密码" required></v-text-field>

        <v-btn rounded block :disabled="!valid" color="success" class="mr-4" @click="validate">登录</v-btn>
      </v-form>
      <div
        @click="$router.push('/register/0')"
        style="font-size:14px;color:#41b883"
        class="text-center my-4"
      >没有账号？去注册</div>
    </div>
  </div>
</template>
<script>
import { Notify } from "vant";
export default {
  data: () => ({
    valid: true,
    username: "",
    nameRules: [v => !!v || "请输入手机号码"],
    password: "",
    pwdRules: [v => !!v || "请输入密码"]
  }),
  created() {
    localStorage.removeItem("token");
  },
  methods: {
    validate() {
      if (this.$refs.form.validate()) {
        this.snackbar = true;
        const dDate = {
          cmd: 1002,
          val: {
            username: this.username,
            password: this.password,
            timeout: 60 * 60 * 24 * 7
          }
        };
        this.$axios.post("q.php", dDate).then(res => {
          if (res.data.result.token) {
            localStorage.setItem("token", res.data.result.token);
            localStorage.setItem("name", this.username);
            // sessionStorage.token=res.data.token,
            // sessionStorage.setItem('name', this.username),
            // console.log(res.data);
            Notify({ type: "success", message: "登录成功" });
            this.$router.push("/");
          } else {
            Notify({ type: "warning", message: "登录失败" });
          }
        });
      }
    }
  }
};
</script>